<template>
    <div class="platform">
        <my-tag :title="title" :showSortImg="false"></my-tag>
        <div class="platform-box">
            <el-form ref="formRef" :model="form" :rules="rules" label-position="left" label-width="auto"
                class="demo-ruleForm platform-formList">
                <div class="form-left">
                    <el-form-item label="昵称" prop="designerName">
                        <el-input v-model="form.designerName" placeholder="请输入昵称"
                            @focus="editDesignerFormLimit.designerNameLimit = true"
                            @blur="editDesignerFormLimit.designerNameLimit = false"
                            :show-word-limit="editDesignerFormLimit.designerNameLimit" maxlength="20" />
                    </el-form-item>
                    <!-- <el-form-item label="授权手机号" prop="tel">
                        <el-input v-model="form.tel" disabled />
                    </el-form-item> -->
                    <el-form-item label="工作年限" prop="workYears">
                        <el-select v-model="form.workYears" placeholder="请选择工作年限" size="large">
                            <el-option label="0~1年" value="0~1年" />
                            <el-option label="1~3年" value="1~3年" />
                            <el-option label="3~5年" value="3~5年" />
                            <el-option label="5~10年" value="5~10年" />
                            <el-option label="10年以上" value="10年以上" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="机构" prop="organizationId">
                        <el-select v-model="form.organizationId" filterable placeholder="请选择机构" size="large">
                            <el-option v-for="item in InstitutionSelList" :key="item.organizationId"
                                :label="item.organizationName" :value="item.organizationId" />
                        </el-select>
                        （如无从属机构，请先入驻设计机构）
                    </el-form-item>
                    <el-form-item label="职位" prop="position">
                        <el-select v-model="form.position" filterable placeholder="请选择职位" size="large">
                            <el-option v-for="item in positionSelList" :key="item.positionId" :label="item.name"
                                :value="item.name" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="个人简介" prop="personalProfile">
                        <el-input type="textarea" :autosize="{ minRows: 5 }" v-model="form.personalProfile"
                            placeholder="请输入个人简介" @focus="introduceLimit = true" @blur="introduceLimit = false"
                            :show-word-limit="introduceLimit" maxlength="500" />
                    </el-form-item>
                    <!-- <el-form-item label="服务地区" prop="serviceAddress">
                        <el-input v-model="form.serviceAddress" @focus="editDesignerFormLimit.serviceAddressLimit = true"
                            @blur="editDesignerFormLimit.serviceAddressLimit = false"
                            :show-word-limit="editDesignerFormLimit.serviceAddressLimit" maxlength="15"
                            placeholder="请输入服务地区" />
                    </el-form-item> -->
                </div>
                <div class="form-right">
                    <el-form-item label="头像" prop="avatarId">
                        <image-upload v-model="form.avatarId" :limit="1" />
                    </el-form-item>
                    <el-form-item label="形象照" prop="coverImage">
                        <image-upload v-model="form.coverImage" :limit="1" />
                    </el-form-item>
                    <el-form-item label="所获荣誉" prop="honour">
                        <el-input type="textarea" :autosize="{ minRows: 5 }" v-model="form.honers"
                            @focus="honersLimitLimit = true" @blur="honersLimitLimit = false"
                            :show-word-limit="honersLimitLimit" maxlength="500" placeholder="请输入荣誉" />
                    </el-form-item>
                    <el-form-item label="荣誉证书" prop="honersImgs">
                        <image-upload v-model="form.honersImgs" :limit="3"></image-upload>
                    </el-form-item>
                </div>
            </el-form>
        </div>
        <div class="platform-submit-btn">
            <el-button type="primary" @click="submitForm">提交审核</el-button>
            <el-button class="default-btn" @click="goBack">返回</el-button>
        </div>
    </div>
</template>
<script setup>
import { getInstitutionSelList, getPositionSelList, addAuthentication, getAuthentication, getImgUrl, updateAuthentication } from "@/api/decor/designer";
const router = useRouter();
const route = useRoute();
const introduceLimit = ref(false)
const { proxy } = getCurrentInstance();
let title = ref('')
const positionSelList = ref([])
const honersLimitLimit = ref(false)
const data = reactive({
    editDesignerFormLimit: {
        serviceAddressLimit: false,
        designerNameLimit: false,
    },
    form: {},
    rules: {
        designerName: [
            { required: true, message: "设计师昵称不能为空", trigger: "blur" }
        ],
        tel: [
            { required: true, message: "授权手机号不能为空", trigger: "blur" },
            {
                pattern: /^1[3|4|5|6|7|8|9]\d{9}$/,
                message: "请输入正确的授权手机号",
                trigger: "change",
            },
        ],
        position: [
            { required: true, message: "职位不能为空", trigger: "blur" }
        ],
        avatarId: [
            { required: true, message: "请上传头像", trigger: "blur" }
        ],
        coverImage: [{ required: true, message: "请上传封面图", trigger: "blur" }],
        organizationId: [{ required: true, message: "机构不能为空", trigger: "blur" }],
        workYears: [{ required: true, message: "工作年限不能为空", trigger: "blur" }],
        level: [{ required: true, message: "设计等级不能为空", trigger: "blur" }],
        // serviceAddress: [{ required: true, message: "服务地区不能为空", trigger: "blur" }]
    }
});
const { form, rules, editDesignerFormLimit } = toRefs(data);
let InstitutionSelList = ref([]);

const getInfoList = () => {
    const origin = route.params.origin
    title.value = origin === 'designerHome' ? '设计师信息修改' : '设计师认证'
    if (origin === 'designerHome') {
        getUserInfo();
    }
}
const getUserInfo = () => {
    getAuthentication().then((res) => {
        form.value = res;
    })
}
// 获取机构 下拉框数据
const getSel = () => {
    getInstitutionSelList().then((res) => {
        res.rows.forEach((v) => {
            InstitutionSelList.value.push({ organizationId: v.organizationId, organizationName: v.organizationName })
        })
    })
    getPositionSelList().then((res) => {
        positionSelList.value = res.data
    })
}
// 提交按钮
const submitForm = () => {
    proxy.$refs["formRef"].validate(valid => {
        if (valid) {
            if (route.params.origin === 'authentication') {
                addAuthentication(form.value).then(response => {
                    proxy.$modal.msgSuccess("提交成功，请等待管理员审核");
                    router.push('/authentication')
                });
            } else {
                proxy.$modal.confirm('是否确认提交，确定后需等待管理员再次审核').then(function () {
                    return updateAuthentication(form.value);
                }).then(() => {
                    proxy.$modal.msgSuccess("提交成功，请等待管理员审核");
                    router.go(-1)
                }).catch(() => { });
            }

        } else {
            proxy.$modal.msgError('请根据提示完善必填信息')
        }
    });
}
// 返回按钮
const goBack = () => {
    router.go(-1)
}
getInfoList()
getSel()
</script>